﻿@using Shared.Extensions

@{
    bool isSelectedComponent =
        FormDesigner.IsSelectedComponent(ComponentData);
}

<div class="widget-wrapper">
    @if (isSelectedComponent)
    {
        <ComponentMover Component="@ComponentData"
                        ComponentsInParentRow="ComponentRow" />
    }

    <ul class="nav nav-tabs" role="tablist">
        @foreach (var tabContainer in TabContainerList)
        {
            var activeTabClass = IsTabOpened(tabContainer) ? "active" : "";
            <li class="nav-item">
                <a class="nav-link d-flex flex-row clickable @activeTabClass"
                   @onclick="@(async () => await OpenTabAsync(tabContainer))"
                   @onclick:preventDefault="true"
                   @onclick:stopPropagation="true">
                    @if (IsMoveTabLeftVisible(tabContainer) && isSelectedComponent)
                    {
                        <Button OnClick="@(async () => await MoveTabLeftAsync(tabContainer))" Size="Size.Small" Icon="fas fa-circle-arrow-left">
                        </Button>

                    }
                    @if (IsMoveTabRightVisible(tabContainer) && isSelectedComponent)
                    {
                        <Button OnClick="@(async () => await MoveTabRightAsync(tabContainer))" Size="Size.Small" Icon="fas fa-circle-arrow-right">
                        </Button>
                    }
                    <span class="tab-title">@(tabContainer.MutLanguage.GetLanguage())</span>
                    @if (IsRemoveTabVisible(tabContainer))
                    {
                        <Button OnClick="@(async () => await OnTabDeleteAsync(tabContainer))" Size="Size.Small" Icon="fas fa-rectangle-xmark">
                        </Button>
                    }
                </a>
            </li>
        }
        <li class="nav-item">
            <a class="nav-link d-flex flex-row clickable"
               title="Add Tab"
               @onclick="@(async () => await AddTabAsync())"
               @onclick:preventDefault="true">
               @*  <MatIconButton Icon="@MatIconNames.Add"
                               Class="component-mover-icon tab-color" /> *@
                <Button Size="Size.Small" Icon="fas fa-plus">
                </Button>
            </a>
        </li>
    </ul>

    @foreach (var tabContainer in TabContainerList)
    {
        @if (IsTabOpened(tabContainer) || IsThereOnlyOneTab())
        {
            <Container ContainerData="tabContainer" IsDesigner="FormDesigner.IsDesigner" />
        }
    }
</div>

@code {
    [CascadingParameter(Name = "Root")]
    [NotNull]
    public FormDesigner? FormDesigner { get; set; }
    /// <summary>
    /// 控件本身的数据
    /// </summary>
    [Parameter]
    [NotNull]
    public ComponentDto? ComponentData { get; set; }
    /// <summary>
    /// 这个组件所在的行
    /// </summary>
    [Parameter]
    [NotNull]
    public RowDto? ComponentRow { get; set; }

    /// <summary>
    /// 对于一个容器控件,会有一个容器集合属性
    /// </summary>
    [Parameter]
    [NotNull]
    public List<ContainerDto>? TabContainerList { get; set; }
    /// <summary>
    /// 处于被激活的容器
    /// </summary>
    private ContainerDto ActiveTabContainer = null;
    /// <summary>
    /// 跟容器
    /// </summary>
    [CascadingParameter(Name = "RootContainer")]
    [NotNull]
    public ContainerDto? RootContainer { get; set; }
    /// <summary>
    /// 设置正在被激活的
    /// </summary>ContainerDto
    /// <param name="tabContainer"></param>
    /// <returns></returns>
    private async Task OpenTabAsync(ContainerDto tabContainer)
    {
        ActiveTabContainer = tabContainer;
        await FormDesigner.SelectContainerAsync(ActiveTabContainer);
    }

    private async Task AddTabAsync()
    {
        var newTabContainer = new ContainerDto(ContainerType.Tab)
            {
                Rows = new List<RowDto>() { new RowDto() },
                MutLanguage = new MutLanguage() { zh_CN = $"Tab {TabContainerList?.Count + 1}" }

            };

        TabContainerList.Add(newTabContainer);
        await OpenTabAsync(newTabContainer);
    }

    private bool IsTabOpened(ContainerDto tabContainer)
    {
        return ActiveTabContainer == tabContainer;
    }

    private bool IsThereOnlyOneTab()
    {
        return TabContainerList?.Count == 1;
    }
    /// <summary>
    /// 一个ContainerDto处于被选中状态并且TabContainerList的个数大于0,那么表示可以被移除
    /// </summary>
    /// <param name="tabContainer"></param>
    /// <returns></returns>
    private bool IsRemoveTabVisible(ContainerDto tabContainer)
    {
        return FormDesigner.IsSelectedContainer(tabContainer) && TabContainerList.Count > 1;
    }

    private async Task OnTabDeleteAsync(ContainerDto tabContainer)
    {
        int containerIndex = TabContainerList.IndexOf(tabContainer);
        TabContainerList.RemoveAt(containerIndex);

        containerIndex = containerIndex > TabContainerList.Count - 1 ? TabContainerList.Count - 1 : containerIndex;

        var previousTabContainer = TabContainerList[containerIndex];
        await OpenTabAsync(previousTabContainer);
    }

    #region Move Tab Left-Right Methods
    private bool IsMoveTabLeftVisible(ContainerDto tabContainer)
    {
        return TabContainerList.IsMoveLeftPossible(tabContainer);
    }

    private bool IsMoveTabRightVisible(ContainerDto tabContainer)
    {
        return TabContainerList.IsMoveRightPossible(tabContainer);
    }

    private async Task MoveTabLeftAsync(ContainerDto tabContainer)
    {
        TabContainerList.MoveLeft(tabContainer);
        await Task.CompletedTask;
    }

    private async Task MoveTabRightAsync(ContainerDto tabContainer)
    {
        TabContainerList.MoveRight(tabContainer);
        await Task.CompletedTask;
    }
    #endregion Move Row Up-Down Methods

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        var firstTabContainer = TabContainerList[0];
        ActiveTabContainer = firstTabContainer;
    }

}
